<template>
  <div>
    <header class="part1">
      <div class="slogan">
        <p>我们的团队</p>
        <p>满足你滴胃！</p>
      </div>
    </header>
    <main style="overflow: hidden">
      <div class="part2">
        <section>
          <Title subcolor="#efefef" style="margin-bottom: 30px">
            <template slot="title">我们的团队</template>
            <template slot="subtitle">Our team</template>
          </Title>
          <div class="team">
            <FigureB
              :src="item.src"
              :alt="item.name"
              v-for="(item, index) in aFigureB"
              :key="index"
            >
              <template slot="name">{{ item.name }}</template>
              <template slot="cont">{{ item.cont }}</template>
            </FigureB>
          </div>
        </section>
      </div>
      <div class="part3">
        <Title subcolor="#efefef" style="float: right; margin-right: 160px">
          <template slot="title">我们的菜品特色</template>
          <template slot="subtitle">Characteristics</template>
        </Title>
        <figure>
          <img src="../../assets/img/about/part3.png" alt="" />
          <figcaption>
            <h4><i class="fa fa-cutlery"></i> 色香味俱全！</h4>
            <p>
              讲究原料质地优良，以盐提鲜，以汤壮鲜，调味讲求咸鲜纯正，突出本味。海鲜类量多质优，异腥味较轻，鲜活者讲究原汁原味.炒菜用油是自种自榨的菜籽油，并使用大量木材作燃料：有炭火的温炖，有柴禾的急烧，有树块的缓烧，是比较讲究的。
            </p>
            <p>
              讲究原料质地优良，以盐提鲜，以汤壮鲜，调味讲求咸鲜纯正，突出本味。海鲜类量多质优，异腥味较轻，鲜活者讲究原汁原味.炒菜用油是自种自榨的菜籽油，并使用大量木材作燃料：有炭火的温炖，有柴禾的急烧，有树块的缓烧，是比较讲究的。
            </p>
            <p>
              讲究原料质地优良，以盐提鲜，以汤壮鲜，调味讲求咸鲜纯正，突出本味。海鲜类量多质优，异腥味较轻，鲜活者讲究原汁原味.炒菜用油是自种自榨的菜籽油，并使用大量木材作燃料：有炭火的温炖，有柴禾的急烧，有树块的缓烧，是比较讲究的。
            </p>
          </figcaption>
        </figure>
      </div>
      <div class="part4">
        <Title subcolor="#efefef" style="margin-bottom: 20px; grid-area: top">
          <template slot="title">我们的菜式</template>
          <template slot="subtitle">Our dishes</template>
        </Title>
        <FigureC
          :src="item.src"
          :alt="item.name"
          v-for="(item, index) in aFigureC"
          :key="index"
        >
          <template slot="title">{{ item.name }}</template>
          <template slot="cont">{{ item.cont }}</template>
        </FigureC>
      </div>
    </main>
    <footer>
      <div class="message">
        <div class="item">
          <i class="fa fa-map-marker"></i>
          <p>桂林电子科技大学</p>
        </div>
        <div class="item">
          <i class="fa fa-phone"></i>
          <p>18507734417</p>
        </div>
        <div class="item">
          <i class="fa fa-envelope"></i>
          <p>1787288097@qq.com</p>
        </div>
      </div>
      <div class="right">
        Copyright © 2019 桂林电子科技大学-卓严钊. All rights reserved.
      </div>
    </footer>
  </div>
</template>

<script>
import Title from "../Title.vue";
import FigureB from "../FigureB.vue";
import FigureC from "../FigureC.vue";

export default {
  components: {
    Title,
    FigureB,
    FigureC,
  },
  data() {
    return {
      aFigureB: [
        {
          name: "Jasmine",
          src: require("../../assets/img/about/1.png"),
          cont: "从厨6年，现为中国烹饪协会会员、高级烹调师、高级厨艺研究员。曾发表多篇论文和文章于中国食品、餐饮世界、中国烹饪等。",
        },
        {
          name: "Bethany",
          src: require("../../assets/img/about/2.png"),
          cont: "从厨6年，现为中国烹饪协会会员、高级烹调师、高级厨艺研究员。曾发表多篇论文和文章于中国食品、餐饮世界、中国烹饪等。",
        },
        {
          name: "Hiram",
          src: require("../../assets/img/about/3.png"),
          cont: "从厨6年，现为中国烹饪协会会员、高级烹调师、高级厨艺研究员。曾发表多篇论文和文章于中国食品、餐饮世界、中国烹饪等。",
        },
        {
          name: "Sebastian",
          src: require("../../assets/img/about/4.png"),
          cont: "从厨6年，现为中国烹饪协会会员、高级烹调师、高级厨艺研究员。曾发表多篇论文和文章于中国食品、餐饮世界、中国烹饪等。",
        },
        {
          name: "Jacob",
          src: require("../../assets/img/about/5.png"),
          cont: "从厨6年，现为中国烹饪协会会员、高级烹调师、高级厨艺研究员。曾发表多篇论文和文章于中国食品、餐饮世界、中国烹饪等。",
        },
        {
          name: "Alina",
          src: require("../../assets/img/about/6.png"),
          cont: "从厨6年，现为中国烹饪协会会员、高级烹调师、高级厨艺研究员。曾发表多篇论文和文章于中国食品、餐饮世界、中国烹饪等。",
        },
      ],
      aFigureC: [
        {
          name: "中华料理",
          src: require("../../assets/img/about/zhonghua.jpg"),
          cont: "我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭",
        },
        {
          name: "日韩料理",
          src: require("../../assets/img/about/rihan.jpg"),
          cont: "我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭",
        },
        {
          name: "西洋料理",
          src: require("../../assets/img/about/xican.jpg"),
          cont: "我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭我要吃饭",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.part1 {
  position: relative;
  background: url(../../assets/img/about/about_banner.jpg) no-repeat center
    center;
  height: 660px;
  position: relative;
  color: #fff;
  overflow: hidden;

  .slogan {
    position: absolute;
    bottom: 50px;
    left: 36px;
    font-family: "hanbiao";
    font-size: 100px;
    text-shadow: 0 0 3px #000;
  }
}

.part2 {
  background-image: radial-gradient(circle, #fff 20%, #f8fdf7);
  & > section {
    max-width: 1100px;
    padding: 50px 0 80px;
    margin: auto;
    .team {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr 1fr;
      grid-gap: 20px 0;
    }
  }
}

.part3 {
  position: relative;
  height: 690px;
  width: 1200px;
  margin: auto;
  figure {
    position: relative;
    img {
      position: absolute;
      top: 80px;
      width: 800px;
    }
    figcaption {
      position: absolute;
      left: 460px;
      top: 170px;
      width: 600px;
      height: 400px;
      background-color: #ff701a;
      color: #fff;
      padding: 30px;
      box-sizing: border-box;
      h4 {
        border-bottom: 1px solid #fff;
        font-family: "hanbiao";
        font-size: 30px;
      }
      p {
        text-align: justify;
        text-indent: 2em;
        margin: 8px 0;
      }
    }
  }
}

.part4 {
  display: grid;
  grid-gap: 30px;
  grid-template-areas:
    "top top top"
    "left center right";
  width: 1100px;
  margin: 0 auto 200px;
  figure {
    position: relative;
    &:nth-of-type(1) {
      grid-area: left;
    }
    &:nth-of-type(2) {
      grid-area: center;
    }
    &:nth-of-type(3) {
      grid-area: right;
    }
  }
}

footer {
  .message {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: #f7f7f7;
    justify-items: center;
    padding: 30px 0;
    .item {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      width: 350px;
      font-size: 20px;
      font-weight: bold;
    }
    i {
      font-size: 30px;
      line-height: 56px;
      width: 56px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid #c4c4c4;
      margin-right: 20px;
    }
  }
  .right {
    padding: 10px;
    text-align: center;
    background-color: #1b1b1b;
    color: #fff;
  }
}
</style>